<template>
    <div class="myselfUsers">
        <breadcrumb
            :breadcrumbItem="breadcrumbMyself"
        />
        <div class="from">
            <el-input placeholder="请输入搜索姓名" class="input-with-select" style="width: 33%" >
                <template #append>
                    <el-button type="primary" ><el-icon><Search /></el-icon></el-button>
                </template>
            </el-input>
            <el-button type="primary" @click="dialogFormVisible = true">添加用户</el-button>
            <el-table border style="width: 100%" :data="myData.value">
                <el-table-column width="80" label="序号" type="index" />
                <el-table-column width="auto" label="用户名" prop="username" />
                <el-table-column width="auto" label="用户邮箱" prop="email" />
                <el-table-column width="120" label="状态">
                    <template #default="scope">
                            <el-switch v-model="scope.row.value"/>
                    </template>
                </el-table-column>
                <el-table-column width="auto" label="检测时间" prop="regtime" />
                <el-table-column width="120" label="备注" />
                <el-table-column width="auto" label="操作" #default="scope">
                    <el-button type="primary" @click="changeUser(scope.row)" >
                        <el-icon><EditPen /></el-icon>
                    </el-button>
                    <el-button type="danger" @click="delUser(scope.row.userId)" >
                        <el-icon><DeleteFilled /></el-icon>
                    </el-button>
                </el-table-column>
            </el-table>
        </div>
    </div>

    <!-- 添加用户 -->
    <editDialog
        :dialogFormVisible="dialogFormVisible"
        @addUsercancel="addUsercancel"
    />

    <!-- 修改用户信息 -->
    <changeUserDialog
        :dialogFormInvisible="dialogFormInvisible"
        :changeUserform="changeUserform"
        @changeUserCancel="changeUserCancel"
    />

</template>

<script setup>
    import breadcrumb from '@/components/breadCrumb.vue'
    import editDialog from '@/components/users/addUserForm.vue'
    import changeUserDialog from '@/components/users/changeUser.vue'
    
    import { ElMessageBox,ElMessage } from 'element-plus';
    
    import { reactive,toRefs,ref } from 'vue'
    import moment from "moment"
    import request from '@/utils/request.js'
    import { watchEffect } from 'vue-demi'
    const breadcrumbMyself = [
        {
            id:205,
            name:"用户管理",
        },
        {
            id:206,
            name:"个人列表",
        }
    ]

    let myData = reactive([])

    let content = ref('')

    const getData = async function(){
        const {data} = await request.get('user/list')
        myData.value = data.data
        myData = myData.value.map((item) =>{
            let reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})/
            let regs = item.regtime.match(reg)
            if(regs == null){
                item.regtime = moment(item.regtime,moment.ISO_8601).format('YY-MM-DD HH:mm:ss')
            }
        })
    }


    //搜索名字
    // const search = function(){
    //     myData.filters((item) => {
    //         return item.name.indexOf(content.value) !== -1
    //     })

    // }


    //关闭添加对话框
    const dialogFormVisible = ref(false)
    const addUsercancel = function(){
        dialogFormVisible.value = false
    }

    //修改用户
    const dialogFormInvisible = ref(false)
    const changeUserform = reactive({})

    const changeUser = function(val){
        changeUserform.value = JSON.parse(JSON.stringify(val))
        dialogFormInvisible.value = true
    }
    const changeUserCancel = function(){
        dialogFormInvisible.value = false
    }

    //删除用户
    const delUser = function(val){
        console.log(val,"delUser");
        ElMessageBox.confirm(
            '确定要删除该用户吗?',
            '提示',
            {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            draggable: true,
            }
        ).then(async() =>{
            const {data} = await request.delete(`user/delete/${val}`)
            if(data.code == 200){
                ElMessage.success('删除用户成功')
            }
            console.log(data);
        }).catch(()=>{})

    }
    
    
    watchEffect(getData)




</script>

<style lang="scss" scoped>
    .myselfUsers{
        padding: 10px;
        .from{
            margin-top: 20px;
            .el-input{
                margin: 0px 10px 10px 0px;
            }
        }
    }
        
</style>